<template>
  <div class="goods">
    <!-- 内容组件 -->
    <content-template :formData="formData"
                      :searchData="searchData"
                      :tableData="tableData"
                      :getDatas ="getDatas"
                      @handleSubmit="handleSubmit">
          <div slot="content_top_left">
            <Button style="margin-bottom:10px" type="primary" @click="handleAdd">
               新增商品
            </Button>
          </div>
    </content-template>
  </div>
</template>
<script>
export default {
   data() {
    return {
      formData:{
        index:'',
        options:{
          hasAdd:{  //需不需要新增按钮——为空时不显示
            
          },
          hasSelect:{
            selectList:[
               
            ]
          }       
        },
      },
      searchData:{  
        searchValue: {  //搜索值
          name: '',
          goods_name: '',
        },
        searchColumns: [ //搜索条件和搜索数量——不传则没有
          {
            key: 'name',
            label: "分类名称",
          },
          {
            key: 'goods_name',
            label: "关键词",
          },
        ]
      },
      tableData:{  //表格数据及操作
        columns: [
            {
                title: '排序',
                key: 'sort',
                width:100,
                align: 'center',
                sortable: true
            },
            {
              title: '商品信息',
              align: 'center',
              width:300,
              render: (h, params) => {
                return h('div',{
                    style: {
                      padding:'10px',
                      display:'flex',
                      alignItems: 'center',
                    }
                  },[
                    h('img', {
                      style: {
                        width: '80px',
                        height: '80px'
                      },
                      attrs: {
                        src: this.$webUrl + params.row.video_image_url
                      }
                    }),
                    h('div',{
                        style: {
                          paddingLeft:'10px',
                          textAlign: 'left',
                          lineHeight:'25px'
                        }
                      },[
                        h('h5', {
                          style: {
                            fontSize: '14px',
                            textOverflow: 'ellipsis',
                            display: '-webkit-box',
                            WebkitLineClamp: '2',
                            WebkitBoxOrient: 'vertical'
                          },
                        },params.row.goods_name),
                        h('p', {
                          style: {
                            fontSize: '13px',
                            fontWeight: 'bold',
                            color:'red',
                          },
                        },'￥' + params.row.sale_price),
                        h('p', {
                          style: {
                            fontSize: '12px',
                            fontWeight: 'bold',
                            color:'#666',
                          },
                        },'虚拟销量：' + params.row.sales_volume),
                    ])
                ]);
              }
            },
            {
              title: '上架/下架商品',
              key: 'is_sale',
              width:200,
              align: 'center',
              render: (h, params) => {
                return h('i-switch', {
                    props: {
                      size:'large',
                      value: params.row.is_sale == 1
                            ? false
                            : params.row.is_sale == 2
                            ? true
                            : '未知'
                    },
                    scopedSlots:{
                      open:() => h('span', '上架'),
                      close:() => h('span', '下架'),
                    },
                    on: {
                      'on-change': (value) => {
                          this.changeStatus(params.index)
                      }
                    }
                })
              }
            },
            {
              title: '操作',
              key: 'action',
              align: 'center',
              render: (h, params) => {
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    on: {
                      click: () => {
                        this.edit(params.index)
                      }
                    }
                  }, '修改'),
                  h('Button', {
                    props: {
                      type: 'error',
                      size: 'small'
                    },
                    on: {
                      click: () => {
                        this.deletes(params.index)
                      }
                    }
                  }, '删除'),
                ]);
              }
          }
        ],
        data: [], //表格数据
        total:0,  //表格数据总量
        page:1,   //表格数据页码
        per_page:10,  //表格一页显示几条数据
        loading: true, //表格数据预加载
      }
    }
  },
  mounted() {
    this.getDatas();
  },
  methods: {
    handleAdd(){
      this.$router.push({
        path:'/goods/add'
      })
    },
    getDatas(){
      let params = {
        type:1,
        page:this.tableData.page,
        per_page:this.tableData.per_page,
      }
      this.$api.getGoods(params)
          .then(res => {
            console.log(res);
            if (res.code == 200) {
              this.tableData.data = res.data.data
              this.tableData.total = res.data.total
              this.tableData.loading = false
          }
      })
    },
    changeStatus(index){
      let is_sale = "";
      let text = "";
      switch( this.tableData.data[index].is_sale){
        case 1:
          text = "上架商品"
          is_sale = 2
          break;
        case 2:
          text = "下架商品"
          is_sale = 1
          break;
        default:
          console.log('其他')
      };
      let params = {
        goods_id: this.tableData.data[index].goods_id,
        is_sale: is_sale
      }
      this.$api.statusGoods(params)
          .then(res => {
            console.log(res);
            if (res.code == 200) {
              this.$Message.success( text + '成功');
              this.getDatas();
            }
      })
    },
    edit(index){
      this.$router.push({
        path:'/goods/edit/' + this.tableData.data[index].goods_id
      })
    },
    deletes(index){
      this.$Modal.confirm({
        title: '提示',
        content: '确认删除该商品吗?',
        onOk: () => {
          let params = {
            rotation_chart_id : this.tableData.data[index].rotation_chart_id
          }
          this.$api.deletesGoods(params).then(res => {
            console.log(res);
            if (res.code == 200) {
              this.$Message.success('删除成功');
              this.getDatas();
            }
          })
        }
      })
    },
  },
  components: {

  }
}
</script>
<style lang="less" scoped>
    @import './index.less';
</style>
